<template>
  <div class="page flex-col">
    <div class="group_2 flex-col">
      <span class="text_1">个人信息</span>
    </div>
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <div class="section_2 flex-row">
          <div class="block_1 flex-col">
            <div class="box_30 flex-row justify-between">
              <van-uploader :after-read="afterRead" :max-count="1" :deletable="false">
                <van-button>
                  <img class="group_1 flex-col" :src="avatar" :alt="avatar" />
                </van-button>
              </van-uploader>
              <span class="text_2">上传头像</span>
            </div>
            <van-field
              class=""
              v-model="username"
              name="姓名"
              label="姓名"
              placeholder="姓名"
              :rules="[{ required: true, message: '请填写姓名' }]"
            />
            <div class="van-hairline"></div>
            <van-field
              class=""
              v-model="result1"
              is-link
              readonly
              name="所在班级"
              label="所在班级"
              placeholder="--选择专业--"
              @click="showPicker1 = true"
              :rules="[{ required: true, message: '请填写专业' }]"
            />
            <van-popup v-model:show="showPicker1" position="bottom">
              <van-picker :columns="columns1" @confirm="onConfirm1" @cancel="showPicker1 = false" />
            </van-popup>
            <div class="van-hairline"></div>
            <van-field
              v-model="result2"
              is-link
              readonly
              name="性别"
              label="性别"
              placeholder="--选择性别--"
              @click="showPicker2 = true"
              :rules="[{ required: true, message: '请填写性别' }]"
            />
            <van-popup v-model:show="showPicker2" position="bottom">
              <van-picker :columns="columns2" @confirm="onConfirm2" @cancel="showPicker2 = false" />
            </van-popup>
            <div class="van-hairline"></div>
            <div class="box_31 flex-row">
              <span class="text_9">爱好</span>
              <div class="text-wrapper_4 flex-col">
                <span class="text_10">篮球</span>
              </div>
              <div class="text-wrapper_5 flex-col">
                <span class="text_11">跳舞</span>
              </div>
            </div>
            <div class="text-wrapper_6 flex-col" style="margin: 16px">
              <van-button class="text_12" round block type="primary" native-type="submit">
                提交
              </van-button>
            </div>
          </div>
          <div class="box_5 flex-col">
            <div class="text-wrapper_16 flex-row">
              <span class="text_13">玩游戏</span> <span class="text_14">画画</span>
              <span class="text_15">cosplay</span>
              <span class="text_16">羽毛球</span>
            </div>
            <div class="text-wrapper_17 flex-row justify-between">
              <span class="text_17">篮球</span> <span class="text_18">爬山</span>
              <span class="text_19">跑步</span> <span class="text_20">摄影</span>
            </div>
            <div class="text-wrapper_18 flex-row">
              <span class="text_21">唱歌</span> <span class="text_22">跳舞</span>
              <span class="text_23">cosplay</span>
              <span class="text_24">羽毛球</span>
            </div>
            <div class="text-wrapper_19 flex-row">
              <span class="text_25">玩游戏</span> <span class="text_26">画画</span>
              <span class="text_27">cosplay</span>
              <span class="text_28">羽毛球</span>
            </div>
            <div class="text-wrapper_20 flex-row justify-between">
              <span class="text_29">篮球</span> <span class="text_30">爬山</span>
              <span class="text_31">跑步</span> <span class="text_32">摄影</span>
            </div>
            <div class="text-wrapper_21 flex-row">
              <span class="text_33">唱歌</span> <span class="text_34">跳舞</span>
              <span class="text_35">cosplay</span>
              <span class="text_36">羽毛球</span>
            </div>
            <div class="box_6 flex-col"></div>
            <div class="box_7 flex-col"></div>
            <div class="box_8 flex-col"></div>
            <div class="box_9 flex-col"></div>
            <div class="box_10 flex-col"></div>
            <div class="box_11 flex-col"></div>
            <div class="box_12 flex-col"></div>
            <div class="box_13 flex-col"></div>
            <div class="box_14 flex-col"></div>
            <div class="box_15 flex-col"></div>
            <div class="box_16 flex-col"></div>
            <div class="box_17 flex-col"></div>
            <div class="box_18 flex-col"></div>
            <div class="box_19 flex-col"></div>
            <div class="box_20 flex-col"></div>
            <div class="box_21 flex-col"></div>
            <div class="box_22 flex-col"></div>
            <div class="box_23 flex-col"></div>
            <div class="box_24 flex-col"></div>
            <div class="box_25 flex-col"></div>
            <div class="box_26 flex-col"></div>
            <div class="box_27 flex-col"></div>
            <div class="box_28 flex-col"></div>
            <div class="box_29 flex-col"></div>
          </div>
        </div>
      </van-cell-group>
    </van-form>
  </div>
</template>
<script setup>
import { ref } from 'vue'

const username = ref('')
const onSubmit = (values) => {
  console.log('submit', values)
}

const result1 = ref('')
const showPicker1 = ref(false)
const columns1 = [
  { text: 'value1', value: 'value1' },
  { text: 'value2', value: 'value2' },
  { text: 'value3', value: 'value3' },
  { text: 'value4', value: 'value4' },
  { text: 'value5', value: 'value5' }
]

const onConfirm1 = ({ selectedOptions }) => {
  result1.value = selectedOptions[0]?.text
  showPicker1.value = false
}

const result2 = ref('')
const showPicker2 = ref(false)
const columns2 = [
  { text: '男', value: 'value1' },
  { text: '女', value: 'value2' },
  { text: '未知', value: 'value3' }
]

const onConfirm2 = ({ selectedOptions }) => {
  result2.value = selectedOptions[0]?.text
  showPicker2.value = false
}

const avatar = ref(
  'https://gitee.com/cheese_doge/picture-material/raw/master/imgs/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202024-07-12%20121657.png'
)

const afterRead = (file) => {
  // 此时可以自行将文件上传至服务器
  avatar.value = file.objectUrl
}
</script>
<style scoped src="@/static/PersonalInfo/common.css" />
<style scoped src="@/static/PersonalInfo/index.scss" />
